<script setup>
import { ref, reactive, computed, watch, onMounted } from 'vue'
// icon
import {
    CaretDownOutlined,
    PlusOutlined,
    MinusOutlined,
    CheckOutlined
} from '@ant-design/icons-vue';
// 组件
// 颜色选取
import ColorPicker from "colorpicker-v3";
import "colorpicker-v3/style.css";
// 花字组件
import SubtitlesFancyFont from './SubtitlesFancyFont.vue'
// 仓库
import { useStore } from "vuex";
const store = useStore();

// 配音应用到全部
const emit = defineEmits(['configurationOverride'])

// 默认音频配置
const voice_config = computed(() => {
    return store.state.videoMixCut.voice_config;
});

// 推荐的默认音频配置
const volcengine_config = computed(() => {
    return store.state.videoMixCut.volcengine_config;
});


// 当前在编辑项的index
const currentIndex = computed(() => store.state.videoMixCut.currentIndex);

// 字幕数据
const subTitle = computed(() => {
    const tab_id = store.state.videoMixCut.Subtitles[currentIndex.value.index].tab_id;
    const find = store.state.videoMixCut.Subtitles[currentIndex.value.index].tts_config.find(item => item.tab_id == tab_id);
    // debugger
    return find || {};
});

const setStore = (data) => {
    store.commit("videoMixCut/MODIFY_DRAWER_VOICE", {
        index: currentIndex.value.index,
        key: data.key,
        value: data.value
    });
};

// 修改声音数据
const volume = computed({
    get() {
        return subTitle.value.volume
    },
    set(val) {
        setStore({
            key: 'volume',
            value: val
        })

    }
});
const speed = computed({
    get() {
        return subTitle.value.speed
    },
    set(val) {
        setStore({
            key: 'speed',
            value: val
        })
    }
});
// 推荐语速
const recommendSpeed = computed({
    get() {
        return subTitle.value.recommendSpeed
    },
    set(val) {
        setStore({
            key: 'recommendSpeed',
            value: val
        })
    }
});
const emotion_intensity = computed({
    get() {
        return subTitle.value.emotion_intensity
    },
    set(val) {
        setStore({
            key: 'emotion_intensity',
            value: val
        })
    }
});
const start_time = computed({
    get() {
        // console.log(subTitle.value.start_time,'subTitle.value.start_timesubTitle.value.start_timesubTitle.value.start_time');
        return subTitle.value.start_time / 1000
    },
    set(val) {
        console.log('触发触发触发触发触发', val)
        setStore({
            key: 'start_time',
            value: +val * 1000
        })
    }
})
// 是否展示配音设置
const showVoice = computed({
    get() {
        return subTitle.value.showVoice
    },
    set(val) {
        console.log(val, 'showVoice');
        setStore({
            key: 'showVoice',
            value: val
        })
    }
})

// 花字组件
const fancyFont = ref(null)

// 音色选择组件
import AudioSelection from './Component/AudioSelection.vue'
const audioSelection = ref(null)

// 时间input 获取焦点和失去焦点, 修改样式
const timeInputFocus = ref(false)
const inputBlur = () => {
    timeInputFocus.value = false
    start_time.value == null && (start_time.value = 0)
}

// 配音应用到全部
const configurationOverride = () => {
    emit('configurationOverride')
}

</script>

<template>
    <div class="FontStyleComponent">
        <!-- 花字设置 -->
        <SubtitlesFancyFont ref="fancyFont" />

        <!--
     配音设置
     -->

        <div class="font_settings_content" style="margin-top: 15px;" v-if="subTitle.tab_id == 'text'">
            <div class="title">
                    <span>配音设置</span>
                    <a-switch v-model:checked="showVoice" size="small" />
            </div>

            <div class="font_setting" v-show="showVoice && subTitle.tab_id == 'text'">
                <div style="display: flex; justify-content: flex-end;">
                    <a-button style="font-size: 13px" @click="configurationOverride">视频配音设置应用到全部镜头组</a-button>
                </div>

                <div class="font_setting_item">
                    <span class="font_setting_item_title">时间设置</span>
                    <!-- 时间设置 -->
                    <div class="setting_time" :class="{ 'focus_input': timeInputFocus }">
                        <a-input-number @focus="timeInputFocus = true" @blur="inputBlur" v-model:value="start_time"
                            style="width: 140px; padding: 0;" allowClear :min="0" :max="4000" :step="0.1" string-mode>
                            <template #addonBefore>
                                <span>第</span>
                            </template>
                            <template #addonAfter>
                                <span>秒</span>
                            </template>
                        </a-input-number>
                    </div>
                </div>
                <!-- 音色选择 -->
                <div class="font_setting_item" style="margin-top: 20px;">
                    <span class="font_setting_item_title">音色选择</span>

                    <div class="timbre_selection">
                        <div class="timbre_selection_cart_left">
                            <!-- {{ subTitle }} -->
                            <img :src="subTitle.img" alt="">
                            <strong>{{ subTitle.name }}</strong>
                        </div>
                        <div class="timbre_selection_cart_right" @click="audioSelection.showModal()">
                            <cu-icon type="icon-qiehuan">
                            </cu-icon>
                        </div>
                    </div>
                </div>
                <!-- 音量调整 -->
                <div class="font_setting_item" style="margin-top: 20px;">
                    <span class="font_setting_item_title">音量调整</span>
                    <div class="volume_adjust">
                        <a-slider class="slider" :min="voice_config.volume.min" :max="voice_config.volume.max" id="test"
                            :step="voice_config.volume.separate" v-model:value="volume" />
                    </div>
                </div>

                <!-- 语速调整 -->
                <div class="font_setting_item" style="margin-top: 20px;">
                    <span class="font_setting_item_title">语速调整</span>
                    <div class="volume_adjust">
                        <a-slider class="slider" :min="voice_config.speed.min" :max="voice_config.speed.max" id="test"
                            :step="voice_config.speed.separate" v-model:value="speed" />
                    </div>
                </div>
                <!-- 推荐语速调整: 初始赋值的音色 类型如果为 volcengine 则显示, 这个值在重新选择音色之后 会清空, 只做初始判断 -->
                <div class="font_setting_item" style="margin-top: 20px;" v-if="subTitle?.voice_type == 2">
                    <span class="font_setting_item_title">推荐语速</span>
                    <div class="volume_adjust">
                        <a-slider class="slider" :min="volcengine_config.speed.min" :max="volcengine_config.speed.max"
                            id="test" :step="volcengine_config.speed.separate" v-model:value="recommendSpeed" />
                    </div>
                </div>

                <!-- 情感 -->
                <div class="font_setting_item" style="margin-top: 20px;">
                    <span class="font_setting_item_title">情感调整</span>
                    <div class="volume_adjust">
                        <a-slider class="slider" :min="voice_config.intensity.min" :max="voice_config.intensity.max"
                            id="test" :step="voice_config.intensity.separate" v-model:value="emotion_intensity" />
                    </div>
                </div>

            </div>

        </div>
    </div>

            <!-- 音色选择弹窗 -->
            <AudioSelection ref="audioSelection"></AudioSelection>
</template>


<style lang="less" scoped>
// 小标题字体颜色
@font_color: #42464e;

.FontStyleComponent {
    // padding: 16px;
    min-height: 270px;

    .font_settings_content {
        border: 1px solid #e8e8e8;
        // overflow: hidden;
        padding: 16px;

        .title {
            display: flex;
            justify-content: space-between;

            span {
                font-size: 13px;
                font-weight: 600;
                color: #1e1c23;
            }
        }

        // 字体样式设置
        .font_setting {
            margin-top: 10px;

            .font_setting_item {
                display: flex;
                position: relative;
                align-items: center;

                // 标题
                .font_setting_item_title {
                    color: @font_color;
                    font-size: 13px;
                    padding-right: 15px;
                    // padding-top: 10px;
                    min-width: 67px;
                }

                // 时间设置标题
                .font_style_title {
                    color: @font_color;
                    font-size: 13px;
                    padding-right: 15px;
                    display: flex;
                    // justify-content: start;
                    align-self: flex-start;
                    // 一行显示
                    white-space: nowrap;
                }

                // 花字设置
                .font_style_box {

                    // display: flex;
                    .font_style_content_box {
                        overflow-y: auto;
                        display: flex;
                        flex-wrap: wrap;
                        gap: 10px;

                        .font_style_content_item {
                            border: 1px solid #ededee;
                            cursor: pointer;
                            border-radius: 8px;

                            &:hover {
                                border-color: #1664ff;
                                background-color: #f4f6f5;
                            }
                        }

                        .active_font_style {
                            border-color: #1664ff;
                        }

                        // 禁用
                        .font_disabled {
                            width: 51px;
                            font-size: 32px;
                            text-align: center;
                        }
                    }

                    // 折叠按钮
                    .folding_panel {
                        color: #737a87;
                        text-align: center;
                        width: 100%;
                        display: block;
                        cursor: pointer;
                        margin-top: 15px;
                    }
                }


                // 字体设置
                .font_setting_box {
                    flex: 1;
                    max-width: 560px;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    background-color: #f6f8fa;
                    overflow-x: auto;
                    overflow-y: hidden;

                    &::-webkit-scrollbar {
                        height: 4px;
                        /* 滚动条的高度，垂直滚动条可能用得上 */
                    }

                    &::-webkit-scrollbar-thumb {
                        background: #888;
                        /* 滑块的背景颜色 */
                        border-radius: 10px;
                        /* 滑块的圆角 */
                    }

                    // 选择字体气泡框
                    :deep(.ant-popover-inner-content) {
                        padding: 0px;
                    }

                    // 字体大小数字input
                    :deep(.ant-input-number) {
                        background-color: transparent;
                        border: none;
                        width: 56px;
                    }

                    :deep(.ant-input-number-input) {
                        text-align: center;
                    }

                    :deep(.zs-color-picker-panel) {
                        margin-top: 16px;
                        left: 0px;
                    }

                    .select_font_box {
                        display: flex;
                        flex-direction: column;
                        height: 400px;
                        overflow-y: auto;
                        padding-right: 4px;

                        &:hover {
                            padding-right: 0;

                            &::-webkit-scrollbar {
                                display: block;
                            }
                        }

                        &::-webkit-scrollbar {
                            width: 4px;
                            /* 滚动条的宽度 */
                            height: 10px;
                            /* 滚动条的高度，垂直滚动条可能用得上 */
                            display: none;
                        }

                        &::-webkit-scrollbar-thumb {
                            background: #888;
                            /* 滑块的背景颜色 */
                            border-radius: 10px;
                            /* 滑块的圆角 */
                        }

                        .select_font_item {
                            padding: 8px 16px;
                            cursor: pointer;
                            min-width: 157px;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            &:hover {
                                background-color: #eeefef;
                            }
                        }

                        .font_active {
                            font-weight: 600;
                        }
                    }


                    .font_settings_style {
                        cursor: pointer;
                        color: #0c0d0e;
                        margin: 0 5px;
                        padding: 3px;
                        display: flex;
                        align-items: center;

                        span {
                            max-width: 70px;
                            margin-right: 5px;
                            font-size: 13px;
                            // 不换行
                            white-space: nowrap;
                            // 省略号 
                            overflow: hidden;
                            text-overflow: ellipsis;

                        }

                        &:hover {
                            background-color: #eeefef;
                        }
                    }

                    // 字体大小
                    .font_settings_size {
                        margin: 0 5px;
                        height: 40px;
                        line-height: 40px;
                        display: flex;
                        align-items: center;

                        &:hover {
                            background-color: #eeefef;
                        }

                        .change_btn {
                            cursor: pointer;
                            padding: 0 10px;
                            color: @font_color ;
                            -webkit-user-select: none;
                            /* Safari, Chrome 和 Opera */
                            -moz-user-select: none;
                            /* Firefox */
                            -ms-user-select: none;
                            /* Internet Explorer/Edge */
                            user-select: none;
                            /* 非前缀的版本, 应用于所有现代浏览器 */
                        }
                    }

                    // 分割线
                    .split_line {
                        margin: 0 10px;
                        height: 20px;
                        width: 1px;
                        background-color: #e2e2e2;
                    }

                    // 字体颜色和背景色
                    .color_settings_box {
                        display: flex;
                        gap: 7px;

                        .settings_color {
                            display: flex;
                            flex-direction: column;
                            // justify-content: center;
                            align-items: center;
                            padding: 5px 7px;
                            position: relative;

                            &:hover {
                                background-color: #eeefef;
                                cursor: pointer;
                            }

                            .color_line {
                                height: 2px;
                                width: 60%;
                                background-color: #000;
                                position: absolute;
                                bottom: 0px;
                                left: calc(50% - 30%);
                            }
                        }
                    }

                    // 字体粗细倾斜和排列方式
                    .font_settings_style_control {
                        display: flex;
                        align-items: center;
                        gap: 10px;

                        // 设置气泡框样式
                        :deep(.ant-popover-inner-content) {
                            padding: 0px;
                        }

                        .select_alignment {
                            display: flex;

                            span {
                                padding: 5px;
                                cursor: pointer;

                                &:hover {
                                    background-color: #eeefef;
                                }
                            }

                            .active_alignment {
                                background-color: #eeefef;
                            }
                        }

                        .font_settings_style_itme {
                            padding: 2px 7px;
                            cursor: pointer;

                            &:hover {
                                background-color: #eeefef;
                            }
                        }

                        .alignment {
                            display: flex;
                            padding: 4px;
                        }
                    }
                }

                // 配音设置
                .setting_time {
                    // 去除input默认样式
                    border: 1px solid #e2e2e2;
                    display: flex;
                    align-items: center;

                    // .clear_btn{
                    //         position: absolute;
                    //          left: -30px;
                    //           z-index: 99;
                    //            top: 3px;
                    //     }
                    :deep(.ant-input-number-group-addon) {
                        border: none;
                        background-color: transparent;
                        // padding: 3px 6px;
                        // display: flex;
                        // align-items: center;
                        // justify-content: center;
                    }

                    :deep(.ant-input-number-input) {
                        border: none;
                        padding: none;
                    }

                    :deep(.ant-input-number) {
                        border: none;

                        &:hover {
                            border: none;
                        }
                    }

                    :deep(.ant-input-number-focused) {
                        box-shadow: none;
                    }

                    :deep(.ant-input-number-handler) {
                        border-right: 1px solid #d9d9d9;
                    }

                }

                // 聚焦的样式
                .focus_input {
                    border-color: #1890ff;
                }

                // 音色选择卡片
                .timbre_selection {
                    width: 284px;
                    border-radius: 4px;
                    background: rgb(246, 248, 250);
                    border: 1px solid rgba(0, 0, 0, 0.05);
                    padding: 12px;
                    display: flex;
                    justify-content: space-between;

                    .timbre_selection_cart_left {
                        display: flex;
                        align-items: center;

                        img {
                            width: 37px;
                            margin-right: 12px;
                        }

                        strong {
                            color: @font_color;
                        }
                    }

                    .timbre_selection_cart_right {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: @font_color;
                        font-size: 17px;
                        cursor: pointer;
                        width: 38px;

                        &:hover {
                            background-color: #eeefef;
                        }
                    }
                }

                // 音量调整
                .volume_adjust {
                    width: 254px;

                    // 修改标点的样式
                    :deep(.ant-slider-dot) {}
                }

            }
        }

    }
}
</style>